<style lang="stylus" scoped>
  .car
    height 45px
    background #141d27
    width 100%
    display flex
    align-items center
    .left
      flex 1
      display flex
      height 45px
      align-items flex-end
      .icon
        margin-left 14px
        width 56px
        height 56px
        margin-bottom 2px
        border-radius 50%
        background #141d27
        margin-right 14px
        position relative
        .num
          position absolute
          background red
          width 25px
          height 17px
          border-radius 10px
          text-align center
          line-height 17px
          font-size 12px
          color #ffffff;
          right 0
          top 0
        .inner
          display inline-block
          width 44px
          height 44px
          background #2b333b
          border-radius 50%
          margin 6px
          font-size 24px
          color rgba(255,255,255,0.4)
          text-align center
          line-height 44px
        &.active .inner
          background #00a0dc
          color #ffffff
      .money
        margin-right 8px
        line-height 45px
        font-size 15px
        color rgba(255,255,255,0.4)
        font-weight 700
        height 45px
        &.active
          color #ffffff
      .minboxs
        transition all 5s;
        position fixed
        left 30px
        bottom 20px
        width 20px
        height 20px
        background blue
        border-radius 50%;
      .pei
        padding-left 8px
        font-size 12px
        color rgba(255,255,255,0.4)
        height 45px
        line-height 45px
    .right
      width 105px
      height 45px
      line-height 45px
      text-align center
      flex 0 0 105px
      background #2b333b
      font-size 12px
      color rgba(255,255,255,0.4)
      font-weight 700
      &.active
        color #ffffff
        background #00b43c
</style>

<template>
  <div class="car">
    <div class="left">
      <div @click="$emit('iscarlist',all.num)" class="icon" :class="{active:all.num}">
        <span class="inner iconfont icon-gouwuche"></span>
        <span class="num" v-show="all.num">{{all.num}}</span>
      </div>
      <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter">
        <div class="minboxs" v-show="show">
        </div>
      </transition>
      <div class="money" :class="{active:all.num}">${{all.price}}</div>
      <div class="pei">另需配送费￥{{seller.deliveryPrice}}元</div>
    </div>
    <div class="right" v-if="all.num == 0">￥{{seller.minPrice}}起送</div>
    <div class="right" v-else-if="all.price < seller.minPrice">还差￥{{seller.minPrice-all.price}}起送</div>
    <div class="right active" v-else>去结算</div>
  </div>
</template>

<script>
export default {
  props: {
    seller:{
      type:Object
    },
    goods:{
      type:Array
    }
  },
  computed:{
    all() {
      let all = {
        price:0,
        num:0
      }
      this.goods.map(function(good){
        good.foods.map(function(food){
          if(food.num){
            all.price += food.num*food.price
            all.num += food.num
          }
        })
      })
      return all
    }
  },
  data() {
    return {
      show:false,
      X: 0,
      Y: 0
    }
  },
  methods:{
    animate(X,Y){
      this.show = true
      this.X = X
      this.Y = Y
    },
    beforeEnter(el){
      console.log(this.X,this.Y)
      el.style.transform = `translate(${this.X},-${this.Y})`
      // el.style.transform = "translate(0, 0)"
    },
    enter(el,done){
      el.offsetWidth;
      el.style.transform = "translate(10px,-10px)"
      // el.style.transform = "translate(200px, -200px)";
      done()
    },
    afterEnter(el){
      console.log(3,el)
      this.show = false
    }
  }
}
</script>

